import React, { useEffect, useState } from 'react';
import { Spin } from 'antd';
import moment from 'moment';
import { eventTrack } from '@/utils/track';
import { getOrganizationByCode } from '../../../services';
import styles from './index.less';

const Organization = ({ organizationCode }) => {
    const [organization, setOrganization] = useState({});
    const [loading, setLoading] = useState();
    const {
        organizationName,
        organizationType,
        organizationDesc,
        createTime,
        parentOrganizationName,
        companyNumber,
        // underDepartmentNumber,
        employeeNum,
        planNum
    } = organization;

    useEffect(() => {
        const fetchOrg = async () => {
            setLoading(true);
            const result = await getOrganizationByCode({ organizationCode });
            const { code, data } = result;
            if (code === 10000) {
                setOrganization(data);
                eventTrack({
                    eventName: 'personnel_management_organization_view_context_click',
                    pageName: 'personnel_management_organization',
                    eventProps: {
                        click_context: `${data.parentOrganizationName}-${data.organizationName}`
                    }
                });
            }
            setLoading(false);
        };
        fetchOrg().then();
    }, [organizationCode]);

    return (
        <div className={styles.organizationWrapper}>
            {loading && (
                <div className={styles.loading}>
                    <Spin />
                </div>
            )}
            {organizationType && (
                <p>
                    <span>{`${['', '机构', '公司', '部门'][organizationType]}名称：`}</span>
                    <span title={organizationName}>{organizationName}</span>
                </p>
            )}
            {parentOrganizationName && (
                <p>
                    <span>上级机构：</span>
                    <span title={parentOrganizationName}>{parentOrganizationName}</span>
                </p>
            )}
            <p>
                <span>在职员工/总编制：</span>
                <span title={`${employeeNum} / ${planNum}`}>
                    {employeeNum}&nbsp;/&nbsp;{planNum}
                </span>
            </p>
            {organizationType !== 3 && (
                <p>
                    <span>下属公司：</span>
                    <span title={companyNumber}>{companyNumber}</span>
                </p>
            )}
            {/* {underDepartmentNumber && (
                <p>
                    <span>下属部门：</span>
                    <span title={underDepartmentNumber}>{underDepartmentNumber}</span>
                </p>
            )} */}
            <p>
                <span>创建时间：</span>
                {createTime && (
                    <span title={moment(createTime).format('YYYY-MM-DD')}>
                        {moment(createTime).format('YYYY-MM-DD')}
                    </span>
                )}
            </p>
            <p>
                <span>{`${['', '机构', '公司', '部门'][organizationType]}简介：`}</span>
                <span>{organizationDesc}</span>
            </p>
        </div>
    );
};

export default Organization;
